﻿<%@ Page Title="" Language="C#" MasterPageFile="~/master/Attendance.master" AutoEventWireup="true" CodeFile="DeptMgmt.aspx.cs" Inherits="LDAP.Web.View.Attendance.AngelMgmt" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <link rel="stylesheet" href="<%= StaticDomain %>/scripts/util/ui.uapselector/skin/default/main.css?r=<%= R %>"  />
    <link rel="stylesheet" href="<%= StaticDomain %>/scripts/util/ui_card/ui_card.css?r=<%= R %>" />
    <link rel="stylesheet" href="<%= StaticDomain %>/scripts/util/JqModal/JqPopU.css?r=<%= R %>" />
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <style type="text/css">
        #selectable li:hover,.niceTab tr:hover { background: #F39814; color: white; }
        #selectable { list-style-type: none; margin: 0; padding: 0; }
        #selectable li { margin: 3px; padding: 1px; float: left; min-width: 500px; height: 160px; font-size:2em;  position:relative; text-align: center;  }  
        #selectable li span { text-align:right; right: 5px;  position:absolute; bottom: 3px; font-size:14px; }
        .niceTab th,.niceTab td {
            font-size:12px; height:24px; line-height:24px; color:black;
        }
    </style>

    <script type="text/javascript" src="<%= StaticDomain %>/scripts/util/ui.uapselector/jquery.ui.uapselector.js?r=<%= R %>"></script>
    <script type="text/javascript" src="<%= StaticDomain %>/scripts/util/ui_card/FixImgSize.js"></script>
    <script type="text/javascript" src="<%= StaticDomain %>/scripts/util/template/trimpath-template.js"></script>
    <script type="text/javascript" src="<%= StaticDomain %>/scripts/util/JqModal/JqPopU.js?r=<%= R %>"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <table class="niceTab" cellspacing="0" cellpadding="0" border="0">
        <thead>
            <tr><th style="width:16%;">一级部门</th><th style="width:16%;">二级部门</th><th style="width:16%;">三级部门</th><th style="width:16%;">四级部门</th><th style="width:16%;">五级部门</th><th>天使</th></tr>
        </thead>
        <tbody>
            <tr>
            </tr>
        </tbody>
    </table>
    
    <%--<ol id="selectable">
    <% foreach (var str in DeptList)
       { %>
       <li class="ui-widget-content"><%= str %><span><%= string.Join("，", AngelList.Where(l=>!string.IsNullOrEmpty(l.Dept) && l.Dept.IndexOf("," + str + ",")>-1).Select(l=>l.UserName +"<em>("+l.Id+")</em>").ToArray()) %></span></li>
    <% } %>
    </ol>--%>
    

    <script type="text/javascript">
        if (typeof String.prototype.startsWith != 'function') {
            String.prototype.startsWith = function (str){
                return this.indexOf(str) == 0;
            };
        }

        $(document).ready(function () {
            page.init();
        });

        var page = {
            company: {},

            init: function(){
                //page.tree();
                page.buildTree();

                $.each(page.angelList, function(i,q){
                    if(q.Dept){
                        var arr = q.Dept.split(',');
                        $.each(arr, function(ii,qq){
                            if(qq!=""){
                                var o = $("td[tag='"+qq+"']");
                                if(o.html()!="")
                                    o.html(o.html() + " / " + q.UserName+"("+q.Id+")");
                                else
                                    o.html(q.UserName+"("+q.Id+")");
                            }
                        });
                    }
                });
            },

            tree: function(){
                $.each(page.deptList, function(x,q){
                    var array = q.split('-'); 
                    for(var i=0;i<array.length;i++){
                        var obj = page.getDeepObj(array, i);
                        if(!obj.hasOwnProperty(array[i])){
                            obj[array[i]]={};
                        }
                    }
                });
            },

            getDeepObj: function(array, step){
                var obj = page.company;
                for(var i=0;i<step;i++){
                    obj = obj[array[i]];
                }
                return obj;
            },

            buildTree: function(){
                var html = [];
                var preArray = [""];
                $.each(page.deptList, function(i, q){
                    html.push("<tr>");
                    var nowArray = q.split('-');
                    var tag=false;
                    for(var i=0;i<nowArray.length;i++){
                        if(preArray.length<i || nowArray[i]!= preArray[i]){
                            tag = true;
                            html.push("<td rowspan='"+page.startsWithCount(nowArray,i)+"'>"+nowArray[i]+"</td>");
                        }
                        else if(tag){
                            html.push("<td>"+nowArray[i]+"</td>");
                        }
                    }                    
                    preArray = nowArray;
                    for(var f = nowArray.length;f<5;f++)
                    {
                        html.push("<td></td>");
                    }
                    html.push("<td tag='"+q+"'></td>");
                    html.push("</tr>");
                });
                $(".niceTab tbody").html(html.join(''));
            },

            startsWithCount: function(nowArray,i){
                var count=0;
                var html = [];
                for(var index=0;index<=i;index++){
                    html.push(nowArray[index]);
                }
                var str = html.join('-');
                $.each(page.deptList, function(i,q){
                    if(q==str ||q.startsWith(str+'-'))
                        count++;
                });
                return count;
            }
        };
        page.deptList = <%= ToJson(DeptList)%>;

        page.angelList = <%= ToJson(AngelList) %>;
    </script>
</asp:Content>

